<template>
  <div class="main">
    <div class="table">
      <el-table
        v-if="feedbacks"
        :data="currentContent"
        stripe
        :default-sort="{
          prop: ['created_date', 'reply_date'],
          order: 'descending',
        }"
        header-cell-class-name="th"
        row-class-name="row"
      >
        <el-table-column
          align="center"
          prop="username"
          label="用户名"
          width="150"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="feedback_content"
          label="意见"
          width="380"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="created_date"
          sortable
          label="反馈时间"
          width="200"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="reply_content"
          label="回复"
          width="380"
        >
        </el-table-column>

        <el-table-column
          align="center"
          prop="reply_date"
          sortable
          label="回复时间"
          width="200"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="reply_date"
          label="用户评价"
          width="200"
        >
          <template slot-scope="scope">
            <el-rate
              v-model="scope.row.rate"
              disabled
            >
            </el-rate>
          </template>
        </el-table-column>

        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-popover
              class="popper"
              placement="left"
              width="300"
              trigger="click"
              v-if="!scope.row.reply_content"
            >
              <el-input
                type="textarea"
                autosize
                placeholder="请输入回复内容"
                v-model="answer"
                show-word-limit
                :maxlength="contentLength"
                style=""
              >
              </el-input>
              <el-button
                icon="el-icon-check"
                size="mini"
                type="primary"
                @click="reply(scope.$index, scope.row.id)"
                class="btn"
                style="margin-top: 10px"
              >
                确定
              </el-button>
              <el-button
                size="medium"
                type="primary"
                icon="el-icon-chat-line-square"
                slot="reference"
                >回复</el-button
              >
            </el-popover>

            <div v-else>
              <span style="color: green">已回复</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-pagination
      background
      layout="prev, pager, next"
      :page-count="total"
      :pager-count="5"
      style="text-align: center"
      @current-change="changeIdx"
      class="pager"
    >
    </el-pagination>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import { getFeedback, replyFeedback } from "@network/manager";
export default {
  data() {
    return {
      feedbacks: null,
      contentLength: 300,
      answer: "",
      total: 0,
      activeIndex: 0,
      line: 10,
    };
  },
  computed: {
    currentContent() {
      console.log(this.activeIndex,'active');
      let begin = this.activeIndex * this.line,
        end = (this.activeIndex + 1) * this.line;
      console.log(
        this.feedbacks.slice(this.activeIndex * this.line, this.line),
        "index"
      ),
        this.activeIndex;
      return this.feedbacks.slice(begin, end);
    },
  },
  methods: {
    ...mapMutations(["setNotice"]),
    changeIdx(idx) {
      this.activeIndex = idx - 1;
      console.log(
        "changeIdx",
        this.activeIndex,
        this.feedbacks,
        this.feedbacks.slice(this.activeIndex * this.line, this.line)
      );
    },
    getFeedback() {
      getFeedback().then((res) => {
        if (res.data.tag) {
          this.feedbacks = res.data.data;
          this.total = Math.ceil(this.feedbacks.length / this.line);
          console.log("feedbacks", this.feedbacks);
        } else {
          this.$message.error("获取公告数据失败");
        }
      });
    },
    reply(index, id) {
      replyFeedback({ content: this.answer, id }).then((res) => {
        if (res.data.tag) {
          this.$message.success("回复成功");
          this.content = "";
          this.getFeedback();
        } else {
          this.$message.error("回复失败");
        }
      });
      console.log(`意见id${id},位于数据下标${index}`);
    },
  },
  activated() {
    this.getFeedback();
    this.setNotice("意见箱");
  },
};
</script>

<style scoped>
/* .main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  height: 88vh;
} */

.main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  height: 88vh;
}

.table {
  height: 760px;
  /* width: 100%; */
  overflow:auto;

}



/deep/ .row {
  font-size: 16px;
  height: 70px;
  box-sizing: border-box;
}

/deep/ .th {
  height: 60px;
}

/* /deep/ .popper {
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: right;
} */

/deep/ .btn {
  margin-right: 10px 0;
}

.success {
  font-size: 14px;
}
</style>
